


<!DOCTYPE HTML>

<link href="res/other/jquery-ui-1.9.0.custom.css" type="text/css" rel="stylesheet" />
<link href="res/other/jquery-ui-1.9.0.custom.min.css" type="text/css" rel="stylesheet" />
<script src='res/other/jquery-1.8.2.js'' type='text/javascript'></script>
<script src='res/other/jquery-ui-1.9.0.custom.js' type='text/javascript'></script>
<script src='res/other/jquery-ui-1.9.0.custom.min.js' type='text/javascript'></script>

<style type="text/css">
    body{
        background-color: black;
    }
</style>

<style type="text/css">
    input, textarea {border:1px solid #CCC;margin:0px;padding:0px}

    #body {max-width:800px;margin:auto}

    #log {
        height:100px;
        margin-left: -100px;
        width: 1000px;
        margin-top: 10px;
    }

    #message {width:100%;line-height:20px}

	#canvas{
	 position:relative;
        top:50px;
        left:10%;
	}
    #divChat{
        position:relative;
        top:50px;
        left:5.5%;
    }

</style>

<script src="fancywebsocket.js"></script>
<script>
    var Server;

    function log( text ) {
        $log = $('#log');
        //Add text to log
        $log.append(($log.val()?"\n":'')+text);
        //Autoscroll
        $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
    }

    function send( text ) {
        Server.send( 'message', text );
    }

    $(document).ready(function() {
        log('Connecting...');
        Server = new FancyWebSocket('ws://192.168.1.249:9400');

        $('#message').keypress(function(e) {
            if ( e.keyCode == 13 && this.value ) {
                log( 'You: ' + this.value );
                send( this.value );

                $(this).val('');
            }
        });

        //Let the user know we're connected
        Server.bind('open', function() {
            log( "Connected." );
        });

        //OH NOES! Disconnection occurred.
        Server.bind('close', function( data ) {
            log( "Disconnected." );
        });

        //Log any messages sent from server
        Server.bind('message', function( payload ){
            log( payload );
        });

        Server.connect();
    });

    $(document).ready(function(){
        $("#apreta_enter").click(function(){
            texto = $('#message').val();
            log( 'You: ' + texto );
            send( texto );
            $('#message').val('');
        });
    });

</script>



<html>
<head>
    <meta charset="utf-8">
    <title>Shuffle Board</title>
</head>
<body>

<div id="dialog" title="Jugador">
    <label>Nombre: </label>
    <input type="text" id="nombreJugador"><br>
    <br>
    <div align="center">
        <button id="confirmar" style="height: 40px;width: 100px;">Aceptar</button>
    </div>
</div>

<div></div>
<div id="canvas">
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
    <canvas id="gameCanvas" width="1200" height="450"></canvas>
</div>
<div>
    <fieldset style="width: 1180px;height: 170px;">
        <legend style="color: white;"> Sala de chat </legend>
        <div id='body' align="left">
            <textarea id='log' name='log' readonly='readonly'></textarea><br/>
            <div>
                <table>
                    <td><label style="color: white;">Mensaje: </label>
                    <td style="width: 700px;"><input type='text' id='message' name='message'/><label style="color: white;"></td>
                    <td><img src="key_enter.png" width="20px" height="20px" id="apreta_enter"></td>
                </table>
            </div>
    </fieldset>
</div>
</div>
<script>var menuType = "Canvas";</script>
<script src="cocos2d.js"></script>



</body>
</html>

<script type="text/javascript">
    // increase the default animation speed to exaggerate the effect

    $(document).ready(function(){

        $("#confirmar").click(function(){
            $( "#dialog" ).dialog( "close" );
        });
        $.fx.speeds._default = 300;
        $(function() {
            $( "#dialog" ).dialog({
                autoOpen: true,
                modal: true,
                show: "fold",
                hide: "explode"
            });

            $( "#opener" ).click(function() {
                $( "#dialog" ).dialog( "open" );
                return false;
            });

        });

        $(function() {
            $( "input[type=submit], a, button" )
                    .button()
                    .click(function( event ) {
                        event.preventDefault();
                    });
        });

    });

</script>